<template>
	<view class="container">
    <rangeDatePick
        :show="isShow"
        @showchange="showchange"
        :value="value"
        @change="bindChange"
        @cancel="bindCancel"
        themeColor="#4C83D6"
        fields="day"
    ></rangeDatePick>
    <view class="tabbar">
			<view class="item" :class="{active: !tabIndex}" @tap="switchTab(0)">{{zzjgName}}</view>
		</view>
		<view v-if="!tabIndex" class="order-list">
			<view class="no-order-content" v-if="currentOrders.length === 0">
				<image src="https://go.cdn.heytea.com/storage/ad/2020/05/20/0bdb360866d94aa4a4404c0b676a1982.jpg"></image>
				<view class="tips">
					<view>.....</view>
					<view>暂无商品</view>
				</view>
			</view>
			<t-refresh v-else ref="refresh" @refresh="refresh"  @loadMore="loadMore" :loadingType="loadingType">
			    <template  slot="content">
			        <navigator class="order" v-for="(order, index) in currentOrders" :key="index" open-type="navigate">
			        	<view class="header">
						     	<view class="left">
                      <view class="flex-fill font-size-medium" style="color: black;margin-bottom: 0.3rem">{{ order.title }}</view>
                      <view class="flex-fill font-size-medium" style="font-size: 0.7rem;color: #8d9aa8">{{ parseTime(order.gmtCreate) }}</view>
                      <view style="margin-top: 10rpx" >
                        {{statusObj[order.status] }}
                      </view>
                      <view class="flex-fill font-size-medium" style="margin-top: 10rpx">￥{{ (order.price / 100).toFixed(2) }}</view>
                   </view>
                  <view class="right" >
                    <image :src="order.img" style="width: 100px;height: 100px;margin-top: 2px;border-radius: 5px"></image>
                    <!--								<view class="left">-->
                    <!--									<view class="flex-fill font-size-medium" style="color: black;margin-bottom: 0.3rem">￥{{ (order.actualPrice / 100).toFixed(2) }}</view>-->
                    <!--									<view class="flex-fill font-size-medium" style="font-size: 0.7rem;color: #8d9aa8">共{{ (order.skuList==null||order.skuList.length==0)?1:order.skuList.length}}件</view>-->
                    <!--								</view>-->
                  </view>
                </view>
			        	<view class="info " style="margin-top: 25rpx">

			        		<view class="left info-spec">
			        			<view>备注：{{ order.mono==null?"":order.mono }}</view>
<!--			        			<view>下单时间：{{ order.gmtCreate }}</view>-->
			        		</view>


			        	</view>

			        	<view class="action">
                            <button type="default" hover-class="none" v-if="order.status ===  0" @click.stop="activation(order)">上架</button>
				              			<button type="default" hover-class="none" v-if="order.status ===  1" @click.stop="activation(order)">下架</button>
			        	</view>
			        </navigator>
			    </template>
			</t-refresh>
			
		</view>
    <uni-popup ref="popuporder" type="center">
      <view class="popup-content d-flex flex-column">
        <view class="d-flex justify-content-end" v-if="auto === false">
          <image src="/static/images/common/clousex-big.png" class="close_btn" @tap="close"></image>
        </view>
        <view class="d-flex flex-fill flex-column justify-content-between">
          <view class="d-flex flex-column">
            <view class="font-size-extra-lg font-weight-bold text-color-base mb-30">订单详情</view>
            <view class=" text-color-base">
              <view class="uni-form-item uni-column">
                <view class="title in_label">订单编号:</view>
                <input class="uni-input in_text" name="input" v-model="orderInfo.orderNo"  placeholder="请输入用户名" />
              </view>
            </view>
            <view class="text-color-base ">
              <view class="uni-form-item uni-column">
                <view class="title in_label">用户ID:</view>
                <input class="uni-input in_text" name="input" v-model="orderInfo.userId"  placeholder="请输入用户名" />
              </view>
            </view>
            <view class="text-color-base ">
              <view class="uni-form-item uni-column">
                <view class="title in_label">订单渠道:</view>
                <input class="uni-input in_text" name="input" v-model="orderInfo.channel"   />
              </view>
            </view>
            <view class="text-color-base ">
              <view class="uni-form-item uni-column">
                <view class="title in_label">订单状态:</view>
                <input class="uni-input in_text" name="input" v-model="orderInfo.status "   />
              </view>
            </view>
            <view class="text-color-base ">
              <view class="uni-form-item uni-column">
                <view class="title in_label">支付渠道:</view>
                <input class="uni-input in_text" name="input" v-model="orderInfo.payChannel | payChannelFilter"   />
              </view>
            </view>
            <view class="text-color-base ">
              <view class="uni-form-item uni-column">
                <view class="title in_label">用户留言:</view>
                <input class="uni-input in_text" name="input" v-model="orderInfo.mono"   />
              </view>
            </view>
            <view class="text-color-base ">
              <view class="uni-form-item uni-column">
                <view class="title in_label">客服备注:</view>
                <input class="uni-input in_text" name="input" v-model="orderInfo.adminMono"   />
              </view>
            </view>
            <view>
            <scroll-view scroll-x>
              <view class="images" v-for="(item, index) in orderInfo.skuList">
                <image class="imageStyle" :src="item.img"  :key="index"></image>
                <view class="flex-fill d-flex flex-column" style="margin-top: -0.2rem;margin-left: 0.5rem;">
                  <view class="font-size-base mb-10">{{ item.title }}</view>
                  <view class="font-size-extra-sm text-color-assist">
                    {{ item.specification }}
                  </view>
                </view>
              </view>
            </scroll-view>
            </view>
          </view>

        </view>
      </view>
    </uni-popup>
	</view>
</template>

<script>
  import DatePicker from '@/components/bz-date-picker/bz-date-picker.vue'
	import tRefresh from "@/components/t-refresh/t-refresh.vue"
  import uniPopup from '@/components/uni-popup/uni-popup.vue'
  import rangeDatePick from '@/components/pyh-rdtpicker/pyh-rdtpicker.vue';

  export default {
	components: {
		    tRefresh,
        DatePicker,
        uniPopup,
        rangeDatePick
	},
  filters: {
        orderStatusFilter(status) {
          return statusObj[status]
        }
      },
	data() {
		return {
		    value:['2021-01-01','2021-12-01'],
        isShow:false,
        refundForm:{},
		    orderInfo:{},
		    userName:"",
        orders: [],
        currentOrders: [],
        storeOrders: [],
        pageSize: 10,
        // 历史订单的分页
        pageNo: 1,
        userId: "",
        tabIndex:0,
        loadingType: 0,
        zzjgName: uni.getStorageSync("deptName"),
        statusObj: {
          0: "下架",
          1: "上架"
        }
		}
	},
	onShow(){
	},
	onHide(){

	},
	async onLoad() {
        this.value = this.startDate()
        this.getList();
	},

	computed: {
		batchInvoiceVisible() {
			return (!this.orderMenuIndex && this.orders.length) || (this.orderMenuIndex && this.storeOrders.length)
		},
		status() {
			if (this.tabIndex) {
				return [40, 50, 70, 80, 90];
			}
			return [10, 20, 30, 60];
		}
	},
	mounted(){
    //this.$refs.popup.open('center')
	},
	watch: {
		currentOrders(newVal, oldVal) {
			console.log(newVal, oldVal);
		}
	},
	methods: {
    activation(order){
        uni.showLoading({
          title: '加载中...'
        });
        this.$api.ajax({
          url: "/web/admin-product/freeze-or-activation",
          // method: "post",
          header: {
            "Content-Type": "application/x-www-form-urlencoded",
            "Authorization": "Bearer "+uni.getStorageSync("jwttoken")
          },

          data: {
            spuId: order.id,
            status: 1-order.status
          },
          success: (res) => {
            order.status = 1-order.status;
            // 成功
            this.$api.msg("成功");
          },
          fail: (res) => {
            this.$api.msg("开了小差");
          },
          complete: (res) => {
            uni.hideLoading();
          }
        });
      },
	  startDate(){
	    let date = new Date()
      let year = date.getFullYear();
	    let mouth = date.getMonth()+1;
	    let day = date.getDay();
	    let a =  year +"-"+mouth+"-01"
	    let ab =  year +"-"+mouth+"-"+date.getDate()
      console.log("aa",a)
      let range = []
      range.push(a)
      range.push(ab)
      return range;
    },
		parseTime(timeStr, cFormat) {
			let time = new Date(timeStr);
			if (arguments.length === 0) {
				return null
			}
			const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'

			let date
			if (typeof time === 'object') {
				date = time
			} else {
				if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
					time = parseInt(time)
				}
				if ((typeof time === 'number') && (time.toString().length === 10)) {
					time = time * 1000
				}
				date = new Date(time)
			}
			const formatObj = {
				y: date.getFullYear(),
				m: date.getMonth() + 1,
				d: date.getDate(),
				h: date.getHours(),
				i: date.getMinutes(),
				s: date.getSeconds(),
				a: date.getDay()
			}
			const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
				let value = formatObj[key]
				// Note: getDay() returns 0 on Sunday
				if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
				if (result.length > 0 && value < 10) {
					value = '0' + value
				}
				return value || 0
			})
			return time_str
		},
		reGetList(){
			this.getList(111)
		},
		// 加载更多
        async loadMore() {
              //loadingType: 0.数据未加载完 1.数据全部加载完了 2.数据加载中
            if(this.loadingType==0){
                this.loadingType=2
                //模拟数据请求
                this.pageNo++;
                this.getList();
            }
        },
		            //刷新
        async refresh(e){
                //模拟数据请求
                this.pageNo = 1;
                this.getList(111);
            },
		getList(flag,startTime,endTime) {
              let date = new Date();
              if(!startTime){
                date.setHours(0);
                date.setMinutes(0);
                date.setSeconds(0);
                startTime =date.getTime();
              }
              if(!endTime){
                date = new Date()
                endTime = date.getTime()
              }
                    // POST /web/app-order/get-order-page
                    const { pageNo, pageSize, userId, status } = this;

                    this.$api.ajax({
                        url: "/web/admin-product/page",
                        header:{
                          "X-Requested-With":"XMLHttpRequest",
                            "Authorization": "Bearer "+uni.getStorageSync("jwttoken")
                        },
                        // method: "post",
                        data: {
                            page:pageNo,
                            limit:pageSize,
                            start:startTime,
                            end:endTime,
                            zzjgId: uni.getStorageSync("deptId")
                        },
                        success: (res) => {
                            const { data } = res.data || {};
                            const { items } = data || {};
                            console.log("abc",res)
                            if(data == null && res.data.status == 403
                            ||res.data.code == 401) {
                                uni.navigateTo({
                                    url: '/pages/login/login'
                                })
                                return
                            }
                            console.log(this.items)

                            if (flag === 111) {
                                console.log("asdf")
                                this.currentOrders = [];
                                this.currentOrders = [...this.currentOrders, ...(items || [])];
                                console.log("curentOrders",this.currentOrders)
                                this.$nextTick(() => {
                                    try{
                                        this.$refs.refresh.endRefresh()
                                    }catch(e){
                                        //TODO handle the exception
                                    }

                                })

                                this.loadingType=0
                                uni.hideLoading()
                                return;
                            }
                            this.currentOrders = [...this.currentOrders, ...(items || [])];
                            if ((items || []).length < pageSize) {
                                this.loadingType=1;
                            } else {
                                this.loadingType = 0;
                            }
                            uni.hideLoading()
                        }
                    });
		},
		async switchTab(index) {
			if(this.tabIndex === index) return
			this.tabIndex = index
			this.orders = [];
			this.currentOrders = [];
			this.pageNo = 1;
			this.pageNo2 = 1;
			this.loadingType = 0;
			this.loadingType2 = 0;
			if(this.tabIndex) {
				//this.getList2();
			} else {
				this.getList()
			}
		},
		handleSwiperItemChange() {	//禁止手动滑动
			return true
		},
		async switchMenuTab(index) {
			if(this.orderMenuIndex === index) return
			this.orderMenuIndex = index
			await this.getOrders()
		}

	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f6f6f6;
}
.popup-content {
  background-color: #FFFFFF;
  border-radius: 24rpx 24rpx 0 0;
  height: 50vh;
  padding: 50rpx 40rpx;
}
.in_label{
  display: block;
  float: left;
  width: 30%;
}
.in_text{
  display: block;
  float: left;
  width: 60%;
  margin-top: 4rpx;
}

.close_btn {
  width: 40rpx;
  height: 40rpx;
}
.navbar {
	height: calc(44px + var(--status-bar-height));
	/* #ifdef H5 */
	height: 44px;
	/* #endif */
	display: flex;
	background-color: #FFFFFF;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999999;
}
.noshow{
	display: none;
}
.talk-btn {
	height: 32px;
	margin-left: 10px;
	margin-top: 26px;
	/* #ifdef H5 */
	margin-top: 6px;
	/* #endif */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: $font-size-sm !important;
	padding: 0 20rpx;
	border-radius: 50rem !important;
	
	image {
		width: 40rpx;
		height: 40rpx;
		margin-right: $spacing-row-sm;
	}
}
.imageStyle{
	width: 40px!important;
	height: 40px!important;
}
.tabbar {
	height: 100rpx;
	background-color: $bg-color-white;
	display: flex;
	align-items: center;
	justify-content: space-around;
	position: fixed;
	//top: calc(44px + var(--status-bar-height));
	left: 0;
	right: 0;
	z-index: 999999;
	.item {
		height: 100%;
		font-size: $font-size-lg;
		color: $text-color-assist;
		font-weight: 400 !important;
		display: flex;
		align-items: center;
		
		&.active {
			color: $text-color-base;
			border-bottom: 4rpx solid $text-color-base;
		}
	}
}

.swiper {
	width: 100%;
	height: calc(100vh - 44px - var(--status-bar-height) - 110rpx);
	/* #ifdef H5 */
	height: calc(100vh - 44px - var(--status-bar-height) - 110rpx - 100rpx);
	/* #endif */
}

.no-order-content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	image {
		width: 300rpx;
		height: 300rpx;
		margin-bottom: 50rpx;
	}

	.tips {
		color: $text-color-assist;
		display: flex;
		flex-direction: column;
		align-items: center;
		line-height: 1.2rem !important;
		margin-bottom: 70rpx;
	}

	button {
		width: 50%;
	}
}

.history-order {
	width: 100%;
	height: 100%;
	position: relative;
	
	.menu {
		padding: 18rpx 30rpx;
		display: flex;
		align-items: center;
		font-size: $font-size-base;
		color: $text-color-grey;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		
		.item {
			padding: 14rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
			
			&.active {
				color: $color-primary;
				background-color: $bg-color-white;
			}
		}
	}
	
	.history-order-swiper {
		width: 100%;
		height: 100%;
	}
}

.store-order-wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: $font-size-base;
	color: $text-color-assist;
	line-height: 1.3rem !important;
	
	image {
		width: 400rpx;
		height: 333rpx;
		margin-bottom: 40rpx;
	}
}

.orders-scroll {
	width: 100%;
	height: 100%;
	padding-top: 104rpx;
}
.images {
  display: inline-block;
  padding: 30rpx 0;
  image {
    flex-shrink: 0;
    width: 150rpx;
    height: 112.5rpx;
  }
}
.order-list {
	display: flex;
	width: 100%;
	flex-direction: column;
	padding-top: calc(100rpx);
	.order {
		background-color: $bg-color-white;
		padding: 30rpx 40rpx;
		margin-bottom: 18rpx;
		
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.status {
				font-size: $font-size-base;
				color: $text-color-grey;
				display: flex;
				align-items: center;
				margin-top: -1.7rem;
				image {
					width: 30rpx;
					height: 30rpx;
					margin-left: $spacing-row-sm;
				}
			}
		}
		
		.images {
			display: flex;
			padding: 30rpx 0;
			image {
				flex-shrink: 0;
				width: 150rpx;
				height: 112.5rpx;
			}
		}
		.info-spec{
			margin-top: -60px;
			margin-bottom: -5.1rem;
		}
		.info {
			display: flex;
			align-items: center;
			margin-bottom: 15rpx;
			margin-top: -0.5rem;
			
			.left {
				flex: 1;
				display: flex;
				flex-direction: column;
				font-size: $font-size-base;
				color: $text-color-grey;
			}
			
			.right {
				font-size: $font-size-lg;
				color: $text-color-base;
			}
		}
		
		.action {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			
			button {
				margin-left: 30rpx;
				font-size: $font-size-sm;
				color: orange !important;
				border: 1px solid orange!important;
				border-radius: 0.5rem;
			}
		}
	}
}
</style>
